<template>

    <div>

        <h2>会员管理</h2>

        <div class="container">

            <div>
                <el-form :inline="true" :model="params" class="demo-form-inline">
                    <el-form-item label="搜索字段">
                        <el-select v-model="params.type" placeholder="搜索字段">
                            <el-option label="推荐人ID" value="parent_id"></el-option>
                            <el-option label="推荐人邀请码" value="parent_code"></el-option>
                            <el-option label="推荐人手机号" value="parent_mobile"></el-option>
                            <el-option label="用户ID" value="id"></el-option>
                            <el-option label="用户手机号" value="mobile"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键词">
                        <el-input v-model="params.keyword" placeholder="关键词"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道来源">
                        <el-select v-model="params.channel" placeholder="请选择渠道">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-for="item in channels" :key="item.open_code" :value="item.open_code"
                                       :label="item.nickname"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="应用系统">
                        <el-select v-model="params.platform" placeholder="请选择系统">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option key="android" value="android" label="安卓"></el-option>
                            <el-option key="ios" value="ios" label="苹果"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="应用市场">
                        <el-select v-model="params.market" placeholder="请选择市场">
                            <el-option key="all" value="all" label="全部"></el-option>
                            <el-option v-if="params.platform=='ios'" key="appstore" value="appstore"
                                       label="苹果"></el-option>
                            <el-option key="office" value="office" label="官网"></el-option>
                            <el-option key="huawei" value="huawei" label="华为"></el-option>
                            <el-option key="xiaomi" value="xiaomi" label="小米"></el-option>
                            <el-option key="vivo" value="vivo" label="VIVO"></el-option>
                            <el-option key="oppo" value="oppo" label="OPPO"></el-option>
                            <el-option key="baidu" value="baidu" label="百度"></el-option>
                            <el-option key="360" value="360" label="360"></el-option>
                            <el-option key="yingyongbao" value="yingyongbao" label="应用宝"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-date-picker
                            v-model="params.datetime"
                            type="daterange"
                            start-placeholder="注册开始日期"
                            end-placeholder="注册截止日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :default-time="['00:00:01']">

                    </el-date-picker>
                    <el-date-picker
                            v-model="params.recharge_datetime"
                            type="daterange"
                            start-placeholder="充值开始日期"
                            end-placeholder="充值截止日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                    >

                    </el-date-picker>

                    <el-form-item>
                        <el-button type="primary" @click="reload">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-alert
                        title="查询结果:"
                        type="success"
                        :closable="false">
                    <el-tag>注册人数:{{total}}个</el-tag>
                    <el-tag>充值人数:{{recharge_total}}个</el-tag>
                    <el-tag>充值金额:{{amount_total}}元</el-tag>
                </el-alert>

            </div>

            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="ID"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="open_code"
                        label="邀请码"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号码"
                        width="180"
                >
                    <template slot-scope="scope">
                        <el-button type="text" @click="call(scope.row.mobile_en, scope.row.mobile)">{{scope.row.mobile}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="app_platform_cn"
                        label="平台"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_amount"
                        :label="'充值金额(￥' + amount_total + ')'"
                >
                </el-table-column>
                <el-table-column
                        prop="order_num"
                        label="充值次数"
                >
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="注册时间"
                >
                </el-table-column>
                <el-table-column
                        label="状态"
                >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.is_disabled == 0">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.is_disabled == 1">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="cards(scope.row.id)">油卡</el-button>
                        <el-button size="small" v-if="scope.row.is_disabled == 0" @click="disable(scope.row.id)">停用
                        </el-button>
                        <el-button size="small" v-if="scope.row.is_disabled == 1" @click="enable(scope.row.id)">启用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>
        <cards-dialog ref="CardsDialog"></cards-dialog>
    </div>
</template>
<script>
    import CardsDialog from './CardsDialog.vue';
    export default {
        components: {
            CardsDialog
        },
        data() {
            return {
                items: [],
                loading: true,
                amount_total: 0,
                recharge_total: 0,
                channels: [],
                params: {
                    limit: 10,
                    offset: 0,
                    type: 'parent_id',
                    keyword: '',
                    datetime: [],
                    recharge_datetime: [],
                    channel: 'all',
                    platform: 'all',
                    market: 'all',
                    invite: 'all',
                    invite_value :'',
                },
                currentPage: 1,
                total: 0,
            }
        },
        created() {
            this.fetchChannels();
            this.fetch();
        },
        methods: {

            fetchChannels() {
                axios.get('/admin/api/channels_kv').then((res) => {
                    if (res.data.code === 0) {
                        this.channels = res.data.data;
                    }
                }).catch(function () {
                    this.$message('系统错误');
                    this.loading = false;
                });
            },
            fetch() {
                axios.get('/admin/api/member', {params: this.params}).then((res) => {
                    if (res.data.code === 0) {
                        this.items = res.data.data.items;
                        this.total = res.data.data.total;
                        this.amount_total = res.data.data.amount_total;
                        this.recharge_total = res.data.data.recharge_total;
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch(function () {
                    this.$message('系统错误');
                    this.loading = false;
                })
            },

            disable() {

            },

            enable() {

            },

            cards(id) {
                this.$refs.CardsDialog.show(id);
            },

            call(mobileEn, mobile) {
                this.$confirm('是否拨打'+mobile, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true,
                        axios.post(
                            '/admin/api/call_mobile',
                            {mobile_en:mobileEn}
                        ).then((res) => {
                            if (res.data.code === 0) {
                                this.$message({
                                    type: 'success',
                                    message: '拨打成功!'
                                });
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg
                                });
                            }
                            this.loading = false;
                        }).catch(function() {
                            this.$message('系统错误');
                            this.loading = false;
                        })
                }).catch(() => {
                });
            },

            // 切换分页
            setPage: function (page) {
                this.currentPage = page;
                this.params.offset = (page - 1) * this.params.limit;
                this.fetch()
            },
            // 重新请求接口获取数据，参数发生了变化，页码重置为1
            reload: function () {
                if (this.currentPage === 1) {
                    this.fetch();
                } else {
                    this.setPage(1);
                }
            }
        }
    }
</script>